<template>
    <view class="jf_detail">
        <view class="jf_head">
            <view class="jf_h_flex" v-for="(item,index) in jf_h" :key="index">
                <view class="jf_title">{{item.title}}</view>
                <view class="jf_weight">{{item.txt}}</view>
            </view>
        </view>
        <view class="jf_earn">
            <view class="jf_earn_title">{{jf_eran_title}}</view>
            <view class="jf_earn_wrap">
                <view class="jf_earn_disflex" v-for="(item,index) in jf_earn" :key="index" @click="jf_earn_fun(item)">
                    <view class="jf_earn_flex">
                        <view class="jf_earn_flex_t">
                            <image class="jf_icon" :src="item.imgsrc"></image>
                            <view class="jf_txt">{{item.txt}}</view>
                        </view>
                    </view>
                    <view class="jf_r">{{item.info}}</view>
                </view>
            </view>
        </view>
        <view class="jf_info">
            <view class="jf_info_title">
                <view class="jf_info_title_l">{{jf_info_title}}</view>
                <view class="jf_info_title_r" @click="jf_info_title_r">{{jf_info_title_set}}<image src="../../static/credit/jf_x.png" class="jf_info_xl"></image></view>
                <view class="jf_info_posit" v-if="isShow">
                    <view class="up_triangle"></view>
                    <view class="jf_posit_disflex">
                        <view class="jf_posit_flex" v-for="(item,index) in jf_posit" :key="index" @click="jf_posit_set(item)">{{item.txt}}</view>
                    </view>
                </view>
            </view>
            <view class="jf_info_cont">
                <view class="jf_info_cont_disflex" v-for="(item,index) in jf_info_cont" :key="index">
                    <view class="jf_info_cont_l">{{item.num}}</view>
                    <view class="jf_info_cont_r">
                        <view class="jf_info_cont_title">{{item.txt}}</view>
                        <view class="jf_info_cont_time">{{item.time}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return {
                jf_h:[
                    {title:'可用积分',txt:299},
                    {title:'本月新增',txt:66}
                ],
                jf_eran_title:'赚取积分',
                jf_earn:[
                    {
                        imgsrc:'/static/credit/jf_1.png',
                        txt:'发布简历领积分',
                        info:'去发布',
                        id:0,
                    },
                    {
                        imgsrc:'/static/credit/jf_2.png',
                        txt:'申请职位领积分',
                        info:'去申请',
                        id:1
                    },
                ],
                jf_info_title:'积分详情',
                jf_info_title_set:'全部',
                jf_posit:[
                    {txt:'全部',id:0},
                    {txt:'获取',id:1},
                    {txt:'使用',id:2},
                ],
                isShow:false,
                jf_info_cont:[
                    {
                        num:'+999999999',
                        txt:'你辛苦几年辛苦那你就雕刻你大可多米尼克的款的对抗么口袋吗',
                        time:'2019-12-17'
                    }
                ],
            }
        },
        onLoad() {
            this.role = this.$global.role
            this.loadData()
        },
        onShow() {
            
        },
        methods:{
            jf_earn_fun(e){
                if(e.id == 0){
                    console.log('去发布简历')
                    if(this.role == 1){
                        uni.navigateTo({
                            url:'/pages/c/p-resume',
                        })
                    }else if(this.role == 2){
                        uni.navigateTo({
                            url:'/pages/yz/yz-info',
                        })
                    }else if(this.role == 3){
                        uni.navigateTo({
                            url:'/pages/gs/gs-info',
                        })
                    }
                }else if(e.id == 1){
                    console.log('去申请职位')
                    if(this.role == 1){
                        uni.navigateTo({
                            url:'/pages/ay/ayhome',
                        })
                    }else if(this.role == 2){
                        uni.navigateTo({
                            url:'/pages/yz/yzhome',
                        })
                    }else if(this.role == 3){
                        uni.navigateTo({
                            url:'/pages/gs/gshome',
                        })
                    }
                }
            },
            jf_info_title_r(){
                this.isShow = true
            },
            jf_posit_set(e){
                this.jf_info_title_set = e.txt
                this.isShow = false
            },
            async loadData() {
                let res = await this.$request.post({
                    url: '/aunt/mine/integralDetail',
                    data: {
                        state: this.role
                    }
                });
                console.log(res);
                this.jf_h[0].txt = res.mineIntegral;//可用积分
                this.jf_h[1].txt = res.mineThisMonth;//本月新增
                this.jf_info_cont = res.monthIntegral;//积分详情
            }
        },
        
    }
</script>

<style lang="scss">
    .jf_detail{
        padding: 44rpx 30rpx;
        .jf_head{
            border: 1rpx solid #eeeeee;
            color: #FF7200;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 70rpx 0;
            border-radius: 10rpx;
            .jf_h_flex{
                flex: 0 0 50%;
                text-align: center;
                .jf_title{
                    color: #FE8F36;
                    font-size: 30rpx;
                    padding-bottom: 40rpx;
                }
                .jf_weight{
                    font-size: 100rpx;
                }
            }
        }
        .jf_earn{
            .jf_earn_title{
                color: #020202;
                font-size: 32rpx;
                margin: 50rpx 0 24rpx 0;
                @include text-ellipsis();
                width: 100%;
                height: 60rpx;
                line-height: 60rpx;
            }
            .jf_earn_wrap{
                border: 1rpx solid #eeeeee;
                padding: 0 36rpx;
                border-radius: 10rpx;
                .jf_earn_disflex{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1rpx solid #eeeeee;
                    box-sizing: border-box;
                    position: relative;
                    padding-right:14rpx;
                    height: 120rpx;
                    line-height: 120rpx;
                    &:after{
                        display: block;
                        content: "";
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        background: url(../../static/credit/jf_r.png) no-repeat right center;
                        background-size: 8rpx 14rpx;
                        width: 8rpx;
                        height: 100%;
                    }
                    &:last-child{
                        border-bottom: none;
                    }
                    .jf_earn_flex{
                        color: #333333;
                        font-size: 30rpx;
                        flex: 1;
                        overflow: hidden;
                        .jf_earn_flex_t{
                            display: flex;
                            align-items: center;
                        }
                        .jf_icon{
                            width: 42rpx;
                            height: 42rpx;
                            margin-right: 18rpx;
                            vertical-align: middle;
                        }
                        .jf_txt{
                            word-break: break-all;
                            display: inline-block;
                            vertical-align: middle;
                            @include text-ellipsis();
                            width: 100%;
                        }
                    }
                    .jf_r{
                        font-size: 24rpx;
                        color: #FF7204;
                        width: 100rpx;
                        text-align:right;
                    }
                }
            }
        }
        .jf_info{
            .jf_info_title{
                display: flex;
                align-items: center;
                justify-content: space-between;
                word-break: break-all;
                margin: 50rpx 0 24rpx 0;
                height: 60rpx;
                line-height: 60rpx;
                position: relative;
                .jf_info_title_l{
                    color: #020202;
                    font-size: 32rpx;
                    @include text-ellipsis();
                    width: 100%;
                }
                .jf_info_title_r{
                    font-size: 24rpx;
                    color: #666666;
                    width: 120rpx;
                    text-align: right;
                    .jf_info_xl{
                        width: 21rpx;
                        height: 12rpx;
                        margin-left: 8rpx;
                    }
                }
                .jf_info_posit{
                    position: absolute;
                    top: 60rpx;
                    right: 0;
                    z-index: 1;
                    background: #FFFFFF;
                    width: 153rpx;
                    .up_triangle{
                        position: absolute;
                        top: -10rpx;
                        right: 20rpx;
                        border-bottom: 10rpx solid #eeeeee;
                        border-right: 10rpx solid transparent;
                        border-left: 10rpx solid transparent;
                        &:after{
                            display: block;
                            content: "";
                            position: absolute;
                            top: 2rpx;
                            left: -10rpx;
                            border-bottom: 10rpx solid #FFFFFF;
                            border-right: 10rpx solid transparent;
                            border-left: 10rpx solid transparent;
                        }
                    }
                    .jf_posit_disflex{
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                        padding: 0 18rpx;
                        border: 1rpx solid #eeeeee;
                        border-radius: 6rpx;
                        .jf_posit_flex{
                            border-bottom: 1rpx solid #eeeeee;
                            height: 60rpx;
                            line-height: 60rpx;
                            color: #000000;
                            font-size: 24rpx;
                            &:last-child{
                                border-bottom: none;
                            }
                        }
                    }
                }
            }
            .jf_info_cont{
                border: 1rpx solid #eeeeee;
                padding: 0 34rpx;
                border-radius: 12rpx;
                .jf_info_cont_disflex{
                    height: 120rpx;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    border-bottom: 1rpx solid #eeeeee;
                    &:last-child{
                        border-bottom: none;
                    }
                    .jf_info_cont_l{
                        color: #FFA13D;
                        font-size: 36rpx;
                        width: 240rpx;
                    }
                    .jf_info_cont_r{
                        text-align: right;
                        flex: 1;
                        overflow: hidden;
                        .jf_info_cont_title{
                            word-break: break-all;
                            @include text-ellipsis();
                            color: #333333;
                            font-size: 26rpx;
                        }
                        .jf_info_cont_time{
                            color: #9C9C9C;
                            font-size: 24rpx;
                            padding-top: 20rpx;
                        }
                    }
                }
            }
        }
    }
</style>
